<template>
  <div class="main">
    <div class="navTitle">
      <van-nav-bar
        :title="barTitle"
      />
    </div>
    <div class="navText">
      <div class="leftText">
        {{ barTitle + "用户" }}
      </div>
      <div class="rightText" @click="showPopup">
        活动介绍
      </div>
    </div>
    <van-popup v-model="show" class="popupText">
      <div class="popupTitle">
        活动介绍
      </div>
      <div class="popupContext">
        兑奖
      </div>
    </van-popup>
    <div class="backText">
      幸运大转盘
    </div>
    <van-row class="rotaryTable" type="flex" justify="center">
      <LuckyWheel
        ref="myLucky"
        width="300px"
        height="300px"
        :blocks="blocks"
        :prizes="prizes"
        :buttons="buttons"
        :defaultConfig="defaultConfig"
        @start="startCallBack"
        @end="endCallBack"
      />
    </van-row>
    <div class="wining">
      <div class="winingNav">
      </div>
      <div class="winingContext">
        <div class="winingItem">
          奖项说明
        </div>
        <div class="winingList">
          <ul>
            <li class="goodsList" v-for="(item, index) in prizeShow" :key="index">
              <div class="goodContext">
                <img :src="item.url" alt="">
                <div class="goodContextRight">
                  <div class="goodsItem">{{ item.level }}</div>
                  <div class="prize">{{ item.name }}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import {LuckyWheel, LuckyGrid} from "@lucky-canvas/vue";
import {luckInfoById} from "@/api/lucky";
import {lottery} from '@/api/lucky';
import {NavBar} from 'vant';
import {Row, Col} from 'vant';
import {Popup} from 'vant';
import {Dialog} from 'vant';

export default {
  name: "Home",
  components: {
    LuckyGrid,
    LuckyWheel,
    [NavBar.name]: NavBar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
  },
  data() {
    return {
      blocks: [{
        padding: "30px",
        imgs: [{
          src: require('assets/img/转盘.png'),
          width: '100%',
          height: '100%',
          rotate: true
        }]
      }],
      buttons: [
        {
          radius: "50%",
          imgs: [{
            src: require('assets/img/按钮.png'),
            width: '100%',
            top: '-100%'
          }]
        }
      ],
      defaultConfig: {
        gutter: "1px"
      },
      prizes: [
        {
          background: '#937EF2',
          fonts: [{
            text: '一等奖',
            top: '50%',
            fontSize: "14px"
          }]
        },
        {
          background: '#F7DE8E',
          fonts: [{
            text: '二等奖',
            top: '50%',
            fontSize: "14px"
          }]
        },
        {
          background: '#FFE300',
          fonts: [{
            text: '谢谢参与',
            top: '50%',
            fontSize: "14px"
          }]
        },
        {
          background: '#F7DE8E',
          fonts: [{
            text: '三等奖',
            top: '50%',
            fontSize: "14px"
          }]
        },
        {
          background: '#937EF2',
          fonts: [{
            text: '四等奖',
            top: '50%',
            fontSize: "14px"
          }]
        },
        {
          background: '#FFE300',
          fonts: [{
            text: '五等奖',
            top: '50%',
            fontSize: "14px"
          }]
        },
      ],
      show: false,
      prizeShow: [
        {
          level: '一等奖',
          url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87dbad9a0cd5ad6eb5f962eab1ca39a3/8718367adab44aed7bb328baa41c8701a08bfbeb.jpg',
          name: '华为P40 Por5G'
        },
        {
          level: '二等奖',
          url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87dbad9a0cd5ad6eb5f962eab1ca39a3/8718367adab44aed7bb328baa41c8701a08bfbeb.jpg',
          name: '华为P40 Por5G'
        },
        {
          level: '三等奖',
          url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87dbad9a0cd5ad6eb5f962eab1ca39a3/8718367adab44aed7bb328baa41c8701a08bfbeb.jpg',
          name: '华为P40 Por5G'
        },
        {
          level: '四等奖',
          url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87dbad9a0cd5ad6eb5f962eab1ca39a3/8718367adab44aed7bb328baa41c8701a08bfbeb.jpg',
          name: '华为P40 Por5G'
        },
        {
          level: '五等奖',
          url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87dbad9a0cd5ad6eb5f962eab1ca39a3/8718367adab44aed7bb328baa41c8701a08bfbeb.jpg',
          name: '华为P40 Por5G'
        },
        {
          level: '谢谢参与',
          url: 'http://192.168.201.104/%E6%9C%AA%E4%B8%AD%E5%A5%96-1639979379605.png',
          name: '谢谢参与'
        },
      ],
      barTitle: '欢迎来到大转盘',
      count: 999,
      message: ''
    }
  },
  created() {
    if (this.$route.query.key) {
      luckInfoById(this.$route.query.key).then(res => {
        this.barTitle = res.data.title // 标题
        this.count = res.data.count   //

        this.prizes = res.data.prizes.map(items => ({
          background: '#937EF2',
          fonts: [{
            text: items.text,
            top: '50%',
            fontSize: '14px'
          }]
        }))

        this.prizeShow = res.data.prizes.map(items => ({
          level: items.text,
          url: items.imgUrl || "http://192.168.201.104/奖-1640359884223.png",
          name: items.prizeName
        }))
      })

    }
  },
  methods: {
    showPopup() {
      this.show = !this.show
    },
    startCallBack() {
      if (this.$route.query.key) {
        lottery(this.$route.query.key).then(res => {
          console.log(res.data.index)
          this.$refs.myLucky.play()
          this.$refs.myLucky.stop(res.data.index)
          this.message = this.prizes[res.data.index].fonts[0].text === "谢谢参与" ? "谢谢参与" : "恭喜中奖"
        }).catch(err => {
          if (err === "请先登录！") {
            Dialog.confirm({
              message: "请先登录"
            }).then(() => {
              this.$router.push({path: "/login", query: {redirect: this.$route.fullPath}});
            }).catch(() => {

            })
          }else if(err==="奖项不存在或已经被抽完"){
            this.$refs.myLucky.play()
            let index = 0;
            for(let i = 0; i<this.prizes.length; i++){
              if (this.prizes[i].fonts[0].text === "谢谢参与"){
                index = i;
                break
              }
            }
            this.$refs.myLucky.stop(index);
            this.message = "谢谢参与"
          }
          else {
            Dialog({message: "抽奖次数不足"});
          }
        })
      } else {
        this.$refs.myLucky.play();
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.$refs.myLucky.stop(index)
        }, 3000)
      }
    },
    endCallBack(prize) {
      // 当完全停止时, 触发回调函数
      if (!this.$route.query.key) {
        Dialog({message: "恭喜中奖"})
      } else {
        Dialog({message: this.message})
      }
    }
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar {
  background-color: #7A37BA !important;
}

::v-deep .van-hairline--bottom::after {
  border: none;
}

::v-deep .van-nav-bar__title {
  color: #ffffff;
  font-weight: 500;
}

.main {
  background: #8EC5FC url('~assets/img/背景图2.jpg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.navTitle {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 10;
}

.navText {
  margin-top: 50px;
  padding-top: 15px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.leftText, .rightText {
  color: white;
  background: #7A37BA;


}

.leftText {
  padding: 5px 15px 5px 5px;
  border-radius: 0px 5px 5px 0px;
}

.rightText {
  padding: 5px 5px 5px 15px;
  border-radius: 5px 0px 0px 5px;
}

.backText {
  width: 100%;
  color: yellow;
  text-align: center;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
  font-weight: 900;
}

.popupText {
  width: 80%;
  height: 400px;
  border-radius: 5px;
  display: flex;
  justify-content: center;

  flex-wrap: wrap;
}

.popupTitle {
  width: 80%;
  height: 50px;
  line-height: 50px;
  color: #E5C548;
  font-size: 18px;
  text-align: center;

}

.popupContext {
  width: 80%;
  height: 350px;

  font-size: 15px;
}

.wining {
  font-size: 16px;
  color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.winingNav {
  width: 40%;
  margin: 10px auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

}

.winingBtn {
  background: orangered;
  color: white;
  height: 40px;
  line-height: 0px;
  width: 140px;
  border-radius: 30px;
  border: none;
  margin: 10px 0 20px 0;
}

.winingContext {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.winingContext:after {
  content: '';
  width: 100%;
  height: 60px;
  background: transparent;
}

.winingItem {
  color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #7A37BA;
  border-radius: 10px 10px 0 0;
}

.winingList {
  width: 100%;


}

.goodsList {
  width: 100%;
  height: 60px;
  position: relative;
  background: white;
}

.winingList ul li:not(:last-of-type) {
  border-bottom: 1px dotted #ccc;

}

.goodContext {
  width: 100%;
  height: 59px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.goodContext img {
  width: 45px;
  height: 45px;
  border-radius: 50px;
  display: block;
  margin-left: 30px;
}

.goodContextRight {
  width: 220px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 20px;
}

.goodsItem {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  width: 100%;
  color: #7A37BA;
  font-size: 14px;
  font-weight: bold;

}

.prize {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 9px;
  color: rgba(90, 90, 90, 1);
  font-weight: 500;
}
</style>
